<template>
  <div>
    <Breadcrumb>
      <Breadcrumb-item href="/">首页</Breadcrumb-item>
      <Breadcrumb-item href="#">用户个人信息</Breadcrumb-item>
    </Breadcrumb>
    <div>
      <Form ref="formUser" :model="formUser" :rules="ruleValidate" :label-width="100">
        <Form-item label="标识" prop="username">
          <Row>
            <Col span="12">
              <Input v-model="formUser.username" readonly />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="姓名" prop="name">
          <Row>
            <Col span="12">
              <Input v-model="formUser.name" placeholder="请输入姓名" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="手机号" prop="mobile">
          <Row>
            <Col span="12">
              <Input v-model="formUser.mobile" placeholder="请输入手机号" />
            </Col>
          </Row>
        </Form-item>

        <Form-item label="Email" prop="email">
          <Row>
            <Col span="12">
              <Input v-model="formUser.email" placeholder="请输入邮箱" />
            </Col>
          </Row>
        </Form-item>

        <Form-item>
          <Button type="primary" @click="handleSave" class="margin-right-sm">保存</Button>
          <Button type="ghost" @click="$router.back()">取消</Button>
        </Form-item>
      </Form>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  // import User from '@/service/app/user'
  import Account from '@/service/account'

  export default {
    name: 'info',
    components: {
    },
    created () {
      this.get()
    },
    data () {
      return {
        formUser: {
          username: '',
          name: '',
          mobile: '',
          email: ''
        },
        ruleValidate: {
          name: [
            {
              required: true,
              message: '名称不能为空'
            },
            {
              max: 100,
              message: '名称不能多于 100 个字'
            }
          ],
          mobile: [
            {
              required: true,
              message: '号码不能为空'
            },
            {
              max: 20,
              message: '号码不能多于 20 个数'
            }
          ],
          identity: [
            {
              max: 20,
              message: '内容长度过长'
            }
          ]
        }
      }
    },
    computed: {
      ...mapState(['users'])
    },
    watch: {
      'users.user': {
        handler (newVal) {
          this.$set(this, 'formUser', newVal)
        }
      }
    },
    methods: {
      get () {
        this.$store.dispatch('getUser', {username: Account.getUsername()}).then((data) => {
          let token = Account.getToken()
          this.formUser = data
          Account.set(data, token)
        })
      },
      handleSave () {
        this.$refs.formUser.validate((valid) => {
          if (valid) {
            const action = 'putUser'
            this.$store.dispatch(action, this.formUser).then(() => {
              this.$Message.success('保存成功！')
            })
          }
        })
      },
      resetFields () {
        this.$refs.formUser.resetFields()
      }
    }
  }
</script>
